<template>
    <div class="font-size-30 height-100 width-100 flex flex-direction-column">
        <zt-table-no-page ref="tableRef" :tableColumns="columnsData" :tableTitle="tableTitle" :api="apiGetDepartList"
            :tableData="tableData" :moreOperations="operationsConfig" @get-data="getCurrData" row-key="id">
            <template #topRight>
                <el-row class="mb-4" v-auth="'departmentManage_create'">
                    <el-button type="primary" :icon="Plus" @click="handerCreateDepartment">新增部门</el-button>
                </el-row>
            </template>
            <template #moreColumn="{ row, index }">
                <el-button :type="btnType[row.level - 1] || 'success'" size="small" @click="handerAddNextLevel(row)"
                    v-auth="'departmentManage_add_next_level'">
                    添加{{ numberToChinese(row.level + 1) }}级部门
                </el-button>
                <el-button size="small" type="primary" @click.stop="handleEdit(row)"
                    v-auth="'departmentManage_modify'">修改</el-button>
                <el-button type="danger" size="small" @click.stop="handleDelete(row)"
                    v-auth="'departmentManage_delete'">删除</el-button>
            </template>
        </zt-table-no-page>
        <add-department-dialog v-model="showVisible" :currentType="currentType" :objectValue="objectValue"
            v-if="showVisible" @success="handerReload" />
    </div>
</template>

<script setup>
import { ElMessageBox, ElMessage } from 'element-plus'
import {
    Plus,
} from '@element-plus/icons-vue'
import { columnsData } from "./configData.js"
import { apiGetDepartList, apiDeleteDepartment } from "@/api/admin/systemSettings/departmentManage/api.js"
import addDepartmentDialog from "./components/add-department-dialog.vue"
import { numberToChinese, setNodeLevel } from "@/utils/publicMethod.js"
const router = useRouter();
const tableData = ref([])

// 更多列配置信息
const operationsConfig = {
    title: '操作', //标题
    align: 'center',//居中方式
    width: '280px',//宽度
    fixed: 'right',//固定定位方向
}
const tableRef = ref(null)
// 重新加载 表格数据
async function handerReload() {
    tableRef.value.reload() //调用父组件里面的重载方法
}


// 父节点id
const parentId = ref(0)
const currentType = ref('add') //当前操作类型
const showVisible = ref(false)
const objectValue = ref({})
// 新增部门
function handerCreateDepartment() {
    currentType.value = 'add';
    showVisible.value = true;
    objectValue.value = {
        parentId: parentId.value
    }
}
// 修改部门
function handleEdit(row) {
    currentType.value = 'edit';
    showVisible.value = true
    objectValue.value = row
}
// 添加下一级
function handerAddNextLevel(row) {
    currentType.value = 'add';
    showVisible.value = true;
    objectValue.value = {
        parentId: row.depId,
        level: row.level
    }
}

// 删除部门
const handleDelete = (row) => {
    ElMessageBox.confirm('你是否确认删除该部门 ? 删除后不可撤回')
        .then(() => {
            apiDeleteDepartment({ depId: row.depId }, '部门删除中').then(res => {
                if (res.success) {
                    ElMessage({
                        message: '部门删除成功',
                        type: 'success',
                    })
                    handerReload()
                    return false
                }
                ElMessage({
                    message: res.message,
                    type: 'warning',
                })
            })
        })
}
// 标题
const tableTitle = ref('')
// 按钮类型
const btnType = ref(['success', 'info', 'warning', 'danger'])

// 获取当前部门数据
function getCurrData(res) {
    tableTitle.value = res.data.depName
    parentId.value = res.data.id
    // 遍历树形数据，设置节点层级
    res.data.children.forEach(node => {
        setNodeLevel(node, 1);
    });
    tableData.value = res.data.children
}


onMounted(() => {

})

</script>

<style lang='scss' scoped></style>